import React, { Component } from "react";

import "./index.css";
export default class Header extends Component {
  state = {
    todayTime: "",
    timer: 0
  };
  public render() {
    return (
      <div className="app-header">
        <button className="btn-fc" onClick={refresh}>
          <svg className="btn-icon" aria-hidden="true">
            <use xlinkHref="#icon-shuaxin"></use>
          </svg>
        </button>
        <div className="first">
          <p className="info">{this.state.todayTime}</p>
        </div>
        <div className="second">
          <div className="app-title">新印相智能服务终端</div>
        </div>
      </div>
    );
  }
  componentWillUnmount() {
    clearInterval(this.state.timer);
  }
  componentDidMount() {
    const timerTemp = setInterval(() => {
      const padDate = (value: any) => {
        // 在月份、日期、小时等小于10时在前面补0
        return value < 10 ? "0" + value : value;
      };
      const date = new Date();
      const year = date.getFullYear();
      const month = padDate(date.getMonth() + 1);
      const day = padDate(date.getDate());
      const hours = padDate(date.getHours());
      const minutes = padDate(date.getMinutes());
      const seconds = padDate(date.getSeconds());
      const today =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds; // 修改数据date
      this.setState({
        todayTime: today
      });
    }, 1000);
    this.setState({
      timer: timerTemp
    });
  }
}

function refresh() {
  window.location.reload();
}
